<template>
  <page-header-wrapper :title="false">
    <a-row :gutter="20">
      <a-col :span="14">
        <a-card :loading="loading" title="编辑业务基本信息">
          <template slot="extra">
            <a-button size="small" type="primary" @click="saveEdit">保存更改</a-button>
          </template>
          <a-form-model
            ref="businessForm"
            :model="businessForm"
            :rules="businessRules"
          >
            <a-form-model-item label="业务类别">
              <a-select
                v-model="businessForm.category"
                placeholder="选择业务类别"
              >
                <a-select-option v-for="(item,index) in categoryOpts" :key="index" :value="index">{{item}}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="组别">
              <a-select
                v-model="businessForm.cat_group"
                placeholder="选择组别"
              >
                <a-select-option v-for="(item,index) in groupOpts" :key="index" :value="index">{{item}}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="业务名称">
              <a-input v-model="businessForm.name" type="text" />
            </a-form-model-item>
            <a-form-model-item label="业务描述">
              <a-textarea :rows="3" v-model="businessForm.name_desc" type="text" />
            </a-form-model-item>
            <a-form-model-item label="基础官费">
              <a-input v-model="businessForm.official_fee" type="text" />
            </a-form-model-item>
            <a-form-model-item label="大客户官费">
              <a-input v-model="businessForm.vip_official_fee" type="text" />
            </a-form-model-item>
            <a-form-model-item label="大客户建议报价下限">
              <a-input v-model="businessForm.vip_offer_section_lft" type="text" />
            </a-form-model-item>
            <a-form-model-item label="建议报价下限">
              <a-input v-model="businessForm.offer_section_lft" type="text" />
            </a-form-model-item>
            <a-form-model-item label="建议报价上限">
              <a-input v-model="businessForm.offer_section_rgt" type="text" />
            </a-form-model-item>
            <a-form-model-item label="申请周期">
              <a-input v-model="businessForm.register_period" type="text" />
            </a-form-model-item>
            <a-form-model-item label="回执时间">
              <a-input v-model="businessForm.receipt_time" type="text" />
            </a-form-model-item>
            <a-form-model-item label="有效期">
              <a-input v-model="businessForm.period_of_validity" type="text" />
            </a-form-model-item>
            <a-form-model-item label="初稿时间">
              <a-input type="text" v-model="businessForm.first_draft_time" />
            </a-form-model-item>
            <a-form-model-item label="改稿时间">
              <a-input type="text" v-model="businessForm.revision_time" />
            </a-form-model-item>
            <a-form-model-item label="流程折算数量">
              <a-input type="text" v-model="businessForm.converted_flow_num" />
            </a-form-model-item>
            <a-form-model-item label="专利师折算数量">
              <a-input type="text" v-model="businessForm.converted_engineer_num" />
            </a-form-model-item>
            <a-form-model-item label="业务材料备注说明">
              <quill-editor :value="businessForm.note" @change="onChange"></quill-editor>
            </a-form-model-item>
            <a-form-model-item label="是否隐藏">
              <a-radio-group v-model="businessForm.hide">
                <a-radio :value="1">是</a-radio>
                <a-radio :value="0">否</a-radio>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="是否需要办理执照业务">
              <a-radio-group v-model="businessForm.is_license">
                <a-radio :value="1">是</a-radio>
                <a-radio :value="0">否</a-radio>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="是否不经过专利师">
              <a-radio-group v-model="businessForm.pass_patentee">
                <a-radio :value="1">是</a-radio>
                <a-radio :value="0">否</a-radio>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="排序">
              <a-input type="text" v-model="businessForm.sort" placeholder="请输入排序" />
            </a-form-model-item>
            <a-form-model-item label="可领取此业务的角色">
              <a-select
                :default-value="defaultRole"
                v-model="defaultRole"
                mode="multiple"
                placeholder="选择可领取此业务的角色"
              >
                <a-select-option v-for="(item,index) in roleOpts" :key="index" :value="index">{{index}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-form-model>
        </a-card>
      </a-col>
      <a-col :span="10">
        <a-card :loading="loading" title="编辑业务所含材料">
          <template slot="extra">
            <a-button size="small" type="primary" icon="plus" @click="onMat('')">添加所需材料</a-button>
          </template>
          <s-table
            bordered
            ref="matTable"
            size="middle"
            :row-key="(record) => record.mat_id"
            :columns="matColumns"
            :data="matData"
          >
            <template slot="action" slot-scope="text,record">
              <a-button size="small" type="link" icon="edit" @click="onMat(record.mat_id)">编辑</a-button>
              <a-button size="small" type="link" icon="delete" @click="delMat(record.mat_id)">删除</a-button>
            </template>
          </s-table>
        </a-card>
        <a-card :loading="loading" style="margin-top:20px" title="编辑业务官方状态">
          <template slot="extra">
            <a-button size="small" type="primary" icon="plus" @click="onState('')">添加官方状态</a-button>
          </template>
          <s-table
            bordered
            ref="stateTable"
            size="middle"
            :row-key="(record) => record.state_id"
            :columns="stateColumns"
            :data="stateData"
          >
            <template slot="action" slot-scope="text,record">
              <a-button size="small" type="link" icon="edit" @click="onState(record.state_id)">编辑</a-button>
              <a-button size="small" type="link" icon="delete" @click="delState(record.state_id)">删除</a-button>
            </template>
          </s-table>
        </a-card>
      </a-col>
    </a-row>
    <a-modal
      title="添加/编辑所需材料"
      v-model="matVisible"
      @ok="onSubmitEdit"
    >
      <a-form-model
        ref="matForm"
        :model="matForm"
        :rules="matRules"
      >
        <a-form-model-item label="材料名称">
          <a-input v-model="matForm.mat_name" type="text" />
        </a-form-model-item>
        <a-form-model-item label="关联系统预定字段">
          <a-select
            v-model="matForm.relate_field"
            placeholder="选择业务类别"
          >
            <a-select-option v-for="(item,index) in reserveFieldsOpts" :key="index" :value="index">{{item}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="材料说明">
          <a-textarea v-model="matForm.desc" :rows="3" />
        </a-form-model-item>
        <a-form-model-item label="材料类型">
          <a-select
            v-model="matForm.type"
            placeholder="选择业务类别"
          >
            <a-select-option v-for="(item,index) in typeOpts" :key="index" :value="index">{{item}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="可选项">
          <a-textarea v-model="matForm.items" :rows="4" />
        </a-form-model-item>
        <a-form-model-item label="是否必填">
          <a-radio-group v-model="matForm.required">
            <a-radio :value="1">是</a-radio>
            <a-radio :value="0">否</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="是否隐藏">
          <a-radio-group v-model="matForm.hide">
            <a-radio :value="1">是</a-radio>
            <a-radio :value="0">否</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="排序">
          <a-input v-model="matForm.sort" type="text" />
        </a-form-model-item>
        <a-form-model-item label="示例类型">
          <a-select
            v-model="matForm.example_type"
            placeholder="选择业务类别"
          >
            <a-select-option v-for="(item,index) in exampleTypeOpts" :key="index" :value="index">{{item}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="示例名称">
          <a-input v-model="matForm.example_content" type="text" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <a-modal
      title="添加/编辑官方状态"
      v-model="stateVisible"
      @ok="onSubmitState"
    >
      <a-form-model
        ref="matForm"
        :model="stateForm"
        :rules="stateRules"
      >
        <a-form-model-item label="状态名称">
          <a-input v-model="stateForm.name" type="text" />
        </a-form-model-item>
        <a-form-model-item label="是否隐藏">
          <a-radio-group v-model="stateForm.is_hide">
            <a-radio :value="1">是</a-radio>
            <a-radio :value="0">否</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="排序">
          <a-input v-model="stateForm.sort" type="text" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
  import QuillEditor from '@/components/Editor/QuillEditor'
  import { STable } from '@/components'
  import {
    delMat,
    delState,
    getEditBusiness,
    getEditMat,
    getEditState,
    getMatList,
    getStateList, postEditBusiness,
    postEditMat, postEditState
  } from '@/api/business'
  import businessColumns from '@/columns/business'
  export default {
    components: {
      STable,
      QuillEditor
    },
    name: 'ProcessEdit',
    data () {
      return {
        loading: false,
        categoryOpts: {},
        groupOpts: {},
        businessForm: {},
        businessRules: {},
        roleOpts: {},
        defaultRole: [],
        matVisible: false,
        matForm: {},
        matRules: {},
        matColumns: businessColumns.mat_columns,
        matData: parameters => {
          return getMatList(Object.assign(parameters, this.queryParam)).then(res => {
            return res.result
          })
        },
        stateForm: {},
        stateRules: {},
        stateVisible: false,
        stateColumns: businessColumns.state_columns,
        stateData: parameters => {
          return getStateList(Object.assign(parameters, this.queryParam)).then(res => {
            return res.result
          })
        },
        queryParam: {},
        typeOpts: {},
        exampleTypeOpts: {},
        reserveFieldsOpts: {}
      }
    },
    activated () {
      this.getEdit(this.$route.params.id)
      this.queryParam['filter[business_id]'] = this.$route.params.id
    },
    methods: {
      getEdit (id) {
        const app = this
        app.loading = true
        getEditBusiness(id).then(res => {
          const info = res.result
          if (res.status === 0) {
            app.businessForm = info.data
            app.roleOpts = info.role_opts
            app.defaultRole = info.role
            app.categoryOpts = info.categoryOpts
            app.groupOpts = info.category20Opts
            app.loading = false
          } else {
            app.$warning({
              title: res.msg
            })
            app.loading = false
          }
        })
      },
      onChange (html) {
        this.businessForm.notes = html
      },
      onMat (id) {
        const app = this
        const data = {}
        data['business_id'] = app.$route.params.id
        data['mat_id'] = id
        getEditMat(data).then(res => {
          app.matForm = res.result.data
          app.typeOpts = res.result.typeOpts
          app.exampleTypeOpts = res.result.exampleTypeOpts
          app.reserveFieldsOpts = res.result.reserveFieldsOpts
          app.matForm['business_id'] = data['business_id']
          app.matForm['mat_id'] = data['mat_id']
          this.matVisible = true
        })
      },
      onSubmitEdit () {
        const app = this
        const form = app.matForm
        const data = {}
        for (const k in form) {
          data['mat[' + k + ']'] = form[k]
        }
        postEditMat(form['business_id'], form['mat_id'], data).then(res => {
          if (res.status === 0) {
            app.matVisible = false
            app.$refs.matTable.refresh(true)
          } else {
            app.$warning({
              title: res.msg
            })
          }
        })
      },
      onState (id) {
        const app = this
        const data = {}
        data['business_id'] = app.$route.params.id
        data['state_id'] = id
        getEditState(data).then(res => {
          app.stateForm = res.result.data
          app.stateForm['business_id'] = data['business_id']
          app.stateForm['state_id'] = data['state_id']
          this.stateVisible = true
        })
      },
      onSubmitState () {
        const app = this
        const form = app.stateForm
        const data = {}
        for (const k in form) {
          data['state[' + k + ']'] = form[k]
        }
        postEditState(form['business_id'], form['state_id'], data).then(res => {
          if (res.status === 0) {
            app.stateVisible = false
            app.$refs.stateTable.refresh(true)
          } else {
            app.$warning({
              title: res.msg
            })
          }
        })
      },
      delMat (id) {
        const app = this
        app.$confirm({
          title: '是否删除业务材料',
          onOk: () => {
            delMat(id).then(res => {
              app.$refs.matTable.refresh(true)
            })
          }
        })
      },
      delState (id) {
        const app = this
        app.$confirm({
          title: '是否删除业务材料',
          onOk: () => {
            delState(id).then(res => {
              app.$refs.stateTable.refresh(true)
            })
          }
        })
      },
      saveEdit () {
        const app = this
        const id = this.$route.params.id
        const form = app.businessForm
        const roles = app.defaultRole
        const data = {}
        for (const k in form) {
          data['Business[' + k + ']'] = form[k]
        }
        for (const k in roles) {
          data['Business[roles][' + k + ']'] = roles[k]
        }
        console.log(id, data)
        postEditBusiness(id, data).then(res => {
          if (res.status === 0) {
            app.getEdit(id)
          } else {
            app.$warning({
              title: res.msg
            })
          }
        })
      }
    }
  }
</script>

<style scoped>
  /deep/ .ant-form-item {
    margin-bottom: 10px
  }
</style>
